<template>
  <div class="activities-container">
    <div class="activity-details" v-for="(item, index) in list" :key="index">
      <van-cell title="活动详情" />

      <div class="title-section">
        <h1>{{ item.eventsTitle }}</h1>
      </div>

      <div class="date-section">
        <p>{{ item.eventsUser }}</p>
        <span>{{ item.eventsTime }}</span>
      </div>

      <div class="content-section">
        <van-image
            v-if="item.eventsImg"
            :src="item.eventsImg"
            width="200px"
            height="100px"
            @error="handleImageError"
        />
        <p v-else>图片加载失败</p>
      </div>

      <div class="description">
        <p>{{ item.eventsContent }}</p>
      </div>

      <div class="button-section">
        <van-button type="primary" @click="goToActivity(item)">进入活动</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {useRouter} from "vue-router";
import {get,post} from "../../util/request"; // 确保正确导入 Toast



const router=useRouter();
const list = ref(
    {}
);





const goToActivity = () => {
  // 在此处添加跳转到活动页面的逻辑
  console.log("跳转到活动页面");
  router.push({name:'project'});

};
onMounted(() => {
  get('circle/events/selectEventsList')
    .then(response => {
      list.value = response.data;
      console.log(list.value);
      console.log(list)
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
});


</script>

<style scoped>
.activity-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-section {
  text-align: center;
  font-size: 8px;
  margin-bottom: 16px;
}

.date-section {
  color: gray;
  font-size: 14px;
  margin-bottom: 16px;
}

/*.content-section {*/
/*  display: flex;*/
/*  text-align: center;*/
/*  width: 100%;*/
/*  max-width: 200px;*/
/*  margin-bottom: 16px;*/
/*}*/

.description {
  padding: 0 16px;
  line-height: 1.6;
}
</style>